<template>
	  <view class="Box" v-if="ifLogin">
	    <view class="chatBox" :class="{goRight:id!==currentId}">
	    <view>
	      <image :src="Useravatar" alt v-if="type==='chat'" />
	    </view>
	    <view>
	      <view class="realname">{{realname}}</view>
	      <view class="message1" v-if="type==='chat'">
	        {{text}}
	        <view :class="[{Lborder:id===currentId},{Rborder:id!==currentId}]"></view>
	      </view>
	      <view class="tip" v-if="type==='notice'">{{text}}</view>
	    </view>
	  </view>
	  </view>
</template>

<script>
export default {
  props: ["text", "type", "username", "realname", "id" ,"avatar"],
  data() {
    return {
      currentUsername: this.$store.getters.user.username,
      currentrealname: "",
      currentId: this.$store.getters.user.id,
    };
  },
  mounted() {
    if(this.ifLogin){
      document.querySelector(
              ".Box"
            ).scrollTop = document.querySelector(".Box").scrollHeight;
    }
  },
  computed: {
    ifLogin(){
      return this.$store.getters.user.username
    },
    Useravatar() {
      return this.id===this.currentId?this.$store.getters.user.avatar : this.avatar;
    },
  },
};
</script>

<style scoped>
	.Box{
	  overflow: hidden;
	}
	.goRight {
	  float: right;
	  margin-right: 15px;
	}
	.realname {
	  margin-left: 20px;
	}
	.chatBox {
	  display: flex;
	}
	img {
	  width: 50px;
	  height: 50px;
	  border-radius: 50px;
	}
	.tip {
	  display: block;
	  font-size: 15px;
	  color: #666666;
	  text-align: center;
	  margin: 5px 15px;
	}
	.message1 {
	  max-width: 150px;
	  display: inline-block;
	  margin: 5px 5px;
	  background-color: rgba(0, 0, 0);
	  border-bottom-color: rgba(0, 0, 0);
	  /*为了给after伪元素自动继承*/
	  color: #fff;
	  font-size: 15px;
	  line-height: 18px;
	  padding: 5px 12px 5px 12px;
	  box-sizing: border-box;
	  border-radius: 6px;
	  position: relative;
	  word-break: break-all;
	}
	
	.Rborder {
	  position: absolute;
	  top: -5px;
	  right: -7px;
	  width: 10px;
	  height: 10px;
	  border-width: 0 0 10px 10px;
	  border-style: solid;
	  border-bottom-color: inherit;
	  /*自动继承父元素的border-bottom-color*/
	  border-left-color: transparent;
	  border-radius: 0 0 60px 0;
	  margin-left: 17px;
	}
	.Lborder {
	  position: absolute;
	  top: -5px;
	  left: -9px;
	  width: 10px;
	  // background-color: green;
	  height: 10px;
	  border-width: 0px 10px 10px 0;
	  border-style: solid;
	  border-bottom-color: inherit;
	  /*自动继承父元素的border-bottom-color*/
	  border-right-color: transparent;
	  border-radius: 0 0px 0px 60px;
	}
</style>
